import React, { useEffect, useState, useRef } from'react';
import './styles/Onboarding.css';
import image1 from '../../public/images/1.png';
import image2 from '../../public/images/2.png';
import image3 from '../../public/images/3.png';
import image4 from '../../public/images/4.png';
import image5 from '../../public/images/5.png';
import { Swiper, Button  } from'react-vant';
import type { ImageType } from '../types/image';
import { useNavigate } from 'react-router-dom';
const Onboarding: React.FC = () => {
  // 控制初始图片的过渡动画
  const [isTransition, setIsTransition] = useState(false);
  const [isVisible, setIsVisible] = useState(true);
  
  // 控制轮播图和最后一张图片的显示
  const [showSwiper, setShowSwiper] = useState(true);
  
  const slides: ImageType[] = [
    { id: "1", image: image2 },
    { id: "2", image: image3 },
    { id: "3", image: image4 }
  ];
  
  const swiperRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  
  // 点击初始图片，触发过渡动画
  const handleClick = () => {
    setIsTransition(true);
    setTimeout(() => {
      setIsVisible(false);
      setShowSwiper(true);
    }, 500);
  };
  
  // 切换到下一张幻灯片
  const nextSlide = () => {
    swiperRef.current?.swipeNext();
  };
  
  // 监听当前轮播图索引变化
  useEffect(() => {
    if (currentIndex === slides.length - 1) {
      // 如果是最后一张幻灯片，延迟显示最终图片
      setTimeout(() => {
        setShowSwiper(false);
      }, 500);
    }
  }, [currentIndex, slides.length]);
  
  // 处理轮播图索引变化
  const onIndexChange = (index: number) => {
    setCurrentIndex(index);
  };
  const navigate = useNavigate()
  return (
    <>
      {/* 初始图片 */}
      {isVisible && (
        <div className={`fade-out ${isTransition ? 'active' : ''}`}>
          <img 
            src={image1} 
            alt="点击隐藏" 
            onClick={handleClick} 
            className="kaipin-image" 
          />
        </div>
      )}
      
      {/* 轮播图 */}
      {showSwiper && (
        <Swiper 
          ref={swiperRef} 
          onChange={onIndexChange}
          indicator={(total, current) => (
            <div className="indicator-container">
              <span className="skip-btn" onClick={() => setShowSwiper(false)}>跳过</span>
              <div className="custom-indicator">
                {Array.from({ length: total }, (_, i) => (
                  <span 
                    key={i} 
                    className={`cursor-pointer ${i === current ? 'bck' : ''}`}
                  ></span>
                ))}
              </div>
              <span 
                className="next-btn" 
                onClick={nextSlide}
                style={{ display: current === total - 1 ? 'none' : 'inline-block' }}
              >
                下一页
              </span>
            </div>
          )}
        >
          {slides.map((item) => (
            <Swiper.Item key={item.id}>
              <div className="slide-item">
                <img src={item.image} className="slider-image" />
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
      )}
      
      {/* 最后一张图片 */}
      {!showSwiper && (
        <div className="last-image-container">
          <img src={image5} className="slider-image" />
          <div className="login-box">
            <p style={{
                margin:"10px 0px",
                fontSize:"20px"
                }}>
            与我们一起测试<br/>您的皮肤健康状况
            </p>
            <p style={{fontSize:"10px"}}>
            根据皮肤科规范<br/>利用AI技术帮助您了解自己的皮肤状况
            </p>
            <Button className="btn1" onClick={()=>{navigate('/login')}}>登录</Button>
            <Button className="btn2" onClick={()=>{navigate('/register1')}}>注册</Button>
          </div>
        </div>
      )}
    </>
  );
};

export default Onboarding;